import React, { useContext } from "react";
import { Layout } from "antd";
import Menus from "../components/Menus";
import AppRouter from "./router/index";
import Logo from "../components/Logo";
import TopHeader from "../components/Header";
import { MenusContext } from "../store/menus";
const { Header, Content, Sider } = Layout;

function Main(props) {
  // const [closed, setClosed] = useState(true);
  const { closed, dispatch } = useContext(MenusContext);
  return (
    <Layout>
      <Sider
        breakpoint="lg"
        collapsedWidth="0"
        collapsed={closed}
        onBreakpoint={broken => {
          console.log(broken);
        }}
        onCollapse={(collapsed, type) => {
          console.log("菜单");
          dispatch({ type: "CLOSED", closed: collapsed });
          console.log(collapsed, type);
        }}
      >
        <Logo />
        <Menus history={props.history}></Menus>
      </Sider>
      <Layout>
        <Header style={{ background: "#fff", padding: 0 }}>
          <TopHeader />
        </Header>
        <Content style={{ margin: "10px 10px 0", minWidth: "300px" }}>
          <div
            style={{
              // padding: 10,
              // background: "#fff",
              minHeight: 360,
              borderRadius: "8px"
            }}
          >
            <AppRouter />
          </div>
        </Content>
        {/* <Footer style={{ textAlign: "center" }}>UvDream</Footer> */}
      </Layout>
    </Layout>
  );
}
export default Main;
